<template>
	<view class="bottom">
		<view class="dis-flex flex-y-center">
			<view class="li-ht60">
				<text class="f-34 f-w letter-spacing3">近期预警</text>
			</view>
			<view class="text1">
				<text>（共{{total}}条）</text>
			</view>
		</view>
		<view class="warning-list m-top10">
			<view class="item letter-spacing3" v-for="(item,index) in warningList" :key="item.id"
				v-if="warningList.length>0">
				<view class="dis-flex flex-x-between">
					<view class="dis-flex flex-y-center">
						<view class="dot" :style="{backgroundColor:dynamicColor(item.state)}">
						</view>
						<view class="m-l-30 text2 oneline-hide">
							<text>{{item.alertType}}</text>
						</view>
					</view>
					<view class="text2">
						{{item.boxName}}
					</view>
					<view class="text2">
						{{item.createTime}}
					</view>
				</view>
				<view class="line" v-if="index != warningList.length - 1">

				</view>
			</view>
			<view class="dis-flex flex-x-center" style="height: 300rpx;" v-if="warningList.length === 0">
				<u-empty text="没有预警信息" mode="data"></u-empty>
			</view>
			<view class="loadmore" v-if="warningList.length>0">
				<u-loadmore @loadmore="loadmore" :status="status" :icon-type="iconType" :load-text="loadText" />
			</view>
		</view>
	</view>
</template>

<script>
	import * as home from '@/api/home.js'
	export default {
		name: "OverviewBottom",
		props: {
			warningList: {
				type: Array,
				default: []
			},
			total: {
				type: [String, Number],
				default: 0
			},
			status: {
				type: String,
				default: 'loadmore'
			}
		},
		data() {
			return {
				iconType: 'flower',
				loadText: {
					loadmore: '点击加载更多',
					loading: '努力加载中',
					nomore: '实在没有了'
				}
			};
		},

		methods: {
			dynamicColor(type) {
				let color = (type == 'A' && 'rgba(212, 0, 0, 1)') || (type == 'B' && 'rgba(255, 132, 0, 1)') || (type ==
						'C' && 'rgba(0, 140, 255, 1)') ||
					'#f5f5f5'
				return color
			},
			// 上拉加载更多
			loadmore() {
				this.$emit('load_more')
			}
		}
	}
</script>

<style scoped lang="scss">
	.bottom {
		padding: 20rpx 30rpx;

		.text1 {
			font-size: 26rpx;
			color: rgba(61, 61, 61, 0.5);
		}

		.warning-list {
			width: 100%;

			.item {
				.dot {
					width: 25rpx;
					height: 25rpx;
					border-radius: 50%;
				}

				.text2 {
					font-size: 26rpx;
					color: rgba(61, 61, 61, 0.5);
				}

				.line {
					width: 3rpx;
					height: 40rpx;
					background: rgba(204, 204, 204, 1);
					margin: 5rpx 0 5rpx 12rpx;
				}
			}
		}

		.loadmore {
			padding: 60rpx;
		}
	}
</style>